<template>
  <div class="container">
    <a-form ref="entityForm" :model="entity" :rules="rules" label-width="150px">
      <a-form-item label="临界长度" field="changdu">
        <a-input v-model="entity.changdu" ref="changdu" placeholder="临界长度" >
          <template #append>mm</template>
        </a-input>
      </a-form-item>
      <a-form-item label="临界直径" field="zhijing">
        <a-input v-model="entity.zhijing" placeholder="临界直径" >
          <template #append>mm</template>
        </a-input>
      </a-form-item>
      <a-form-item label="计算方式" field="calctype">
        <a-select v-model="entity.calctype" placeholder="计算方式">
          <a-option>加法</a-option>
          <a-option>乘法</a-option>
        </a-select>
      </a-form-item>
      <a-form-item label="系数" field="xishu">
        <a-input v-model="entity.xishu" placeholder="系数" />
      </a-form-item>
      <a-form-item>
        <a-space>
          <a-button type="primary" @click="btnSubmit">确 定</a-button>
        </a-space>
      </a-form-item>
    </a-form>
  </div>
</template>

<script lang="ts" setup>
import axios from "axios";
import { Message } from '@arco-design/web-vue'
import {reactive, ref, onMounted, defineProps, defineEmits, nextTick} from "vue";

const entityForm = ref(null)
const changdu = ref(null)
let entity = ref({
  changdu: '',
  zhijing: '',
  calctype: '',
  xishu: '',
})
const rules = reactive({
  changdu: [
    { required: true, message: '必填项', trigger: 'blur' },
    { trigger: 'blur', type: 'number', min: 0,message: '大于0的数字', }
  ],
  zhijing: [
    { required: true, message: '必填项', trigger: 'blur' },
    { trigger: 'blur', type: 'number', min: 0,message: '大于0的数字', }
  ],
  calctype: [
    { required: true, message: '必填项', trigger: 'blur' },
  ],
  xishu: [
    { required: true, message: '必填项', trigger: 'blur' },
    { trigger: 'blur', type: 'number', min: 0,message: '大于0的数字', }
  ]
})
const loadEntity = ()=>{
  axios.post( '/myconfig/listconfig',{} ).then( res =>{
    const configList = res.data
    entity.value.changdu = configList.find(x => x.itemkey==='changdu')?.itemvalue || ""
    entity.value.zhijing = configList.find(x => x.itemkey==='zhijing')?.itemvalue || ""
    entity.value.calctype = configList.find(x => x.itemkey==='calctype')?.itemvalue || ""
    entity.value.xishu = configList.find(x => x.itemkey==='xishu')?.itemvalue || ""
  })
}
const btnSubmit = ()=>{
  if(!entityForm.value) return;
  entityForm.value.validate().then((errors) =>{
    if(!errors){
      axios.post('/myconfig/saveconfig', entity.value).then( (res) =>{
        const {code,msg, data} = res;
        if(code != '200'){
          Message.error(msg);
        }else{
          Message.success(msg)
        }
      })
    }else{
      console.log('error submit!!');
      return false;
    }
  })
}
onMounted(()=>{
  loadEntity()
  nextTick(()=>{
    changdu.value.focus();
  })
})
</script>

<style scoped>

</style>
